<template>
  <div class=''>
    主页
    <div>
      <my-cover v-model="imgSrc"></my-cover>
    </div>

    <el-form>
      <!-- 由于my-channels的根元素是el-form-item，则在使用这个组件时，要用el-form包起来 -->

      <!-- 1. 给子组件监听自定义事件：aaa，处理函数写在父组件中 -->
      <my-channels @aaa="hAaa"></my-channels>
      <my-channels-vmodel v-model="channel_id_vmodel"></my-channels-vmodel>
    </el-form>
  </div>
</template>

<script>
import MyCover from '@/components/MyCover'

// 引入MyChannels组件
import MyChannels from '@/components/MyChannels'
import MyChannelsVmodel from '@/components/MyChannelsVmodel'
export default {
  name: 'Home',
  components: {
    MyChannels,
    MyChannelsVmodel,
    MyCover
  },
  data () {
    return {
      //
      imgSrc: 'http://toutiao.meiduo.site/Fk2YzxVPpu89_zmIFX75DtbD8atn',
      channel_id_vmodel: 101,
      channel_id: '' // 这个值，需要从子组件MyChannels中更新过来。
    }
  },
  created () {
    console.log('home组件', this.$eventBus)
    // 在创建组件时，开始去通过eventBus去监听事件
    // 格式：
    //  eventBus.$on('事件名',处理函数)
    this.$eventBus.$on('helloeventbus', (eventObj) => {
      console.log('在home组件中，收到了helloeventbus消息， 参数是', eventObj)
    })
  },
  methods: {
    hAaa (value) {
      console.log('王文博定义的aaa发生了，并传来的参数是：', value)
      this.channel_id = value
    }
  }
}
</script>

<style scoped lang='less'></style>
